<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Unity WebGL Player | digital-twin</title>
  <link rel="shortcut icon" href="Bin/TemplateData/favicon.ico" />
  <link rel="stylesheet" href="Bin/TemplateData/style.css" />
  <script src="./WebGLInit/Init.js"></script>
<!--  <script src="http://localhost:9001/axios.min.js"></script>-->
</head>
<body style="padding: 0; border: 0; margin: 0">
<!-- <div id="unity-container" class="unity-desktop"> -->
<canvas
  id="unity-canvas"
  style="position: absolute; background: #231f20"
></canvas>
<div id="unity-loading-bar">
  <div id="unity-logo"></div>
  <div id="unity-progress-bar-empty">
    <div id="unity-progress-bar-full"></div>
  </div>
</div>
<!--   <div id="unity-warning"> </div>-->
<!--      <div id="unity-footer">-->
<!--        <div id="unity-webgl-logo"></div>-->
<!--        <div id="unity-fullscreen-button"></div>-->
<!--        <div id="unity-build-title">digital-twin</div>-->
<!--      </div>-->
<!--    </div>-->
<script>
  var container = document.querySelector("#unity-container");
  var canvas = document.querySelector("#unity-canvas");
  var loadingBar = document.querySelector("#unity-loading-bar");
  var progressBarFull = document.querySelector("#unity-progress-bar-full");
  // var fullscreenButton = document.querySelector("#unity-fullscreen-button");
  // var warningBanner = document.querySelector("#unity-warning");

  // Shows a temporary message banner/ribbon for a few seconds, or
  // a permanent error message on top of the canvas if type=='error'.
  // If type=='warning', a yellow highlight color is used.
  // Modify or remove this function to customize the visually presented
  // way that non-critical warnings and error messages are presented to the
  // user.
  function unityShowBanner(msg, type) {
    function updateBannerVisibility() {
      // warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
    }
    var div = document.createElement("div");
    div.innerHTML = msg;
    // warningBanner.appendChild(div);
    if (type == "error") div.style = "background: red; padding: 10px;";
    else {
      if (type == "warning")
        div.style = "background: yellow; padding: 10px;";
      setTimeout(function () {
        // warningBanner.removeChild(div);
        updateBannerVisibility();
      }, 5000);
    }
    updateBannerVisibility();
  }

  var buildUrl = "Bin/Build";
  var loaderUrl = buildUrl + "/WebGL.loader.js";
  var config = {
    dataUrl: buildUrl + "/WebGL.data.unityweb",
    frameworkUrl: buildUrl + "/WebGL.framework.js.unityweb",
    codeUrl: buildUrl + "/WebGL.wasm.unityweb",
    streamingAssetsUrl: "Bin/StreamingAssets",
    companyName: "DefaultCompany",
    productName: "digital-twin",
    productVersion: "0.1",
    showBanner: unityShowBanner,
  };

  // By default, Unity keeps WebGL canvas render target size matched with
  // the DOM size of the canvas element (scaled by window.devicePixelRatio)
  // Set this to false if you want to decouple this synchronization from
  // happening inside the engine, and you would instead like to size up
  // the canvas DOM size and WebGL render target sizes yourself.
  // config.matchWebGLToCanvasSize = false;

  // If you would like all file writes inside Unity Application.persistentDataPath
  // directory to automatically persist so that the contents are remembered when
  // the user revisits the site the next time, uncomment the following line:
  // config.autoSyncPersistentDataPath = true;
  // This autosyncing is currently not the default behavior to avoid regressing
  // existing user projects that might rely on the earlier manual
  // JS_FileSystem_Sync() behavior, but in future Unity version, this will be
  // expected to change.

  if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    // Mobile device style: fill the whole browser client area with the game canvas:

    var meta = document.createElement("meta");
    meta.name = "viewport";
    meta.content =
      "width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes";
    document.getElementsByTagName("head")[0].appendChild(meta);
    container.className = "unity-mobile";
    canvas.className = "unity-mobile";

    // To lower canvas resolution on mobile devices to gain some
    // performance, uncomment the following line:
    // config.devicePixelRatio = 1;
  } else {
    // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:

    canvas.style.width = "100%";
    canvas.style.height = "100%";
  }

  loadingBar.style.display = "block";

  var script = document.createElement("script");
  script.src = loaderUrl;
  script.onload = () => {
    createUnityInstance(canvas, config, (progress) => {
      progressBarFull.style.width = 100 * progress + "%";
    })
      .then((unityInstance) => {
        loadingBar.style.display = "none";
        setTimeout(()=>{
          queueMessage(unityInstance)
        },1000)
        // fullscreenButton.onclick = () => {
        //   unityInstance.SetFullscreen(1);
        // };
        run(unityInstance);
      })
      .catch((message) => {
        alert(message);
      });
  };

  document.body.appendChild(script);
</script>
</body>
</html>
